<!--
  @文件名： menuCom
  @来源：YongPing.Wang|2023/11/19 14:19
  @描述：
-->
<template>
  <div class="menuCom LG-wh100">
    <el-scrollbar>
      <el-menu :default-active="defaultActive" :collapse="isCollapse" :collapse-transition="false">
        <template v-for="item in menuList" :key="item.id">
          <MenuItemCom :item="item" />
        </template>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
  import { ref, watchEffect } from 'vue'
  import { layoutInfo } from '@/store/layoutInfo.ts'
  import { type IMenu, menuInfo } from '@/store/menuInfo.ts'
  import MenuItemCom from '@/viewBase/mainModel/components/menuItemCom.vue'
  import { useRoute } from 'vue-router'

  const layoutInfoStore = layoutInfo()
  const menuInfoStore = menuInfo()
  const route = useRoute()

  // 改变值 收缩按钮
  const isCollapse = ref(false)
  const changeCollapse = (): void => {
    isCollapse.value = !layoutInfoStore.platformMenuOpen
  }
  watchEffect(changeCollapse)

  // 菜单列表
  const menuList = ref<IMenu[]>([])
  const changeMenu = (): void => {
    menuList.value = menuInfoStore.menuList
  }
  watchEffect(changeMenu)

  // 菜单激活
  const defaultActive = ref()
  const changeRoute = (): void => {
    defaultActive.value = route.path
  }
  watchEffect(changeRoute)
</script>

<style scoped lang="scss">
  .menuCom {
    -webkit-user-select: none;
    ::v-deep(.el-menu) {
      border-right: unset;
      .el-menu-item.is-active {
        box-sizing: border-box;
        background-color: var(--el-menu-active-bg-color);
      }
      .el-sub-menu .el-menu {
        background-color: var(--el-menu-bg-color1);
      }
    }
  }
</style>
